<template>
  <div class="node-area">
    <HeaderSearch class="header-search">
      <template>
        <el-form class="search-from" label-position="left" :inline="true">
          <el-form-item label="策略搜索：" class="area-search">
            <el-input v-model="area" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item class="search-btn">
            <el-button
              plain
              icon="el-icon-search"
              class="btn"
              @click="getAreaList"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </template>
    </HeaderSearch>
    <TableContent
      ref="TableContent"
      :params="params"
      :tableData="tableData"
      :areaList="areaList"
    >
      <template #addBtn>
        <el-col class="col-btn">
          <el-button
            type="info"
            icon="el-icon-circle-plus-outline"
            @click="changeArea('add')"
            >新建</el-button
          >
        </el-col>
      </template>
      <template #operate="{ row }">
        <el-button type="text" size="small" @click="check(row)">
          查看详情
        </el-button>
        <el-button type="text" size="small" @click="changeArea('edit', row)">
          修改
        </el-button>
        <el-button
          type="text"
          size="small"
          style="color: red"
          @click="delArea(row.policyId)"
        >
          删除
        </el-button>
      </template>
    </TableContent>
    <CheckDialog ref="CheckDialog" title="策略详情">
      <template #content>
        <el-row>
          <el-col :span="6">
            <p>策略名称：</p>
            <p>策略方案：</p>
          </el-col>
          <el-col :span="18">
            <p style="text-align-last: left">
              {{ areaDetails.policyName }}
            </p>
            <el-table :data="areaDetails.currentPageRecords">
              <el-table-column
                type="index"
                label="序号"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="nodeName"
                label="点位名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="innerCode"
                label="设备编号"
                align="center"
              ></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </template>
    </CheckDialog>
    <AddOrEdit ref="AddOrEdit" :title="title" @addArea="addArea">
      <template #formDialog>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-position="right"
          label-width="140px"
        >
          <el-form-item label="策略名称：" prop="policyName">
            <el-input
              v-model="form.policyName"
              placeholder="请输入"
              maxlength="15"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="策略方案：" prop="discount">
            <el-input v-model="form.discount" placeholder="请输入">
              <template #append>
                <div class="add-sub">
                  <i class="el-icon-arrow-up" @click="addRatio"></i>
                  <i class="el-icon-arrow-down" @click="subRatio"></i>
                </div>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </template>
    </AddOrEdit>
  </div>
</template>

<script>
import HeaderSearch from '../point/components/HeaderSearch.vue'
import TableContent from '../point/components/TableContent'
import CheckDialog from '../point/components/CheckDialog'
import AddOrEdit from '../point/components/AddOrEdit'
import {
  getPolicyList,
  delPolicy,
  checkPolicy,
  addPolicy,
  editPolicy
} from '@/api/policy'
export default {
  name: 'Dkd2Policy',

  components: {
    HeaderSearch,
    TableContent,
    CheckDialog,
    AddOrEdit
  },
  data () {
    return {
      // 策略查询
      area: '',
      // 分页
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      // 表格数据
      tableData: {},
      // 表头
      areaList: {
        policyName: '策略名称',
        discount: '策略方案',
        createTime: '创建日期'
      },
      // 策略详情
      areaDetails: {},
      // 表单标题
      title: '',
      // 表单
      form: {
      },
      // 规则
      rules: {
        policyName: [{ required: true, message: '请输入', trigger: 'blur' }],
        discount: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },

  watch: {},

  mounted () {
    this.getAreaList()
  },

  methods: {
    // 获取表格数据
    async getAreaList () {
      let res
      try {
        this.$refs.TableContent.loading = true
        if (this.area) {
          res = await getPolicyList({ ...this.params, policyName: this.area })
        } else {
          res = await getPolicyList(this.params)
        }
      } finally {
        this.$refs.TableContent.loading = false
      }
      if (res.currentPageRecords.length <= 0 && this.params.pageIndex > 1) {
        this.params.pageIndex--
        this.getAreaList()
      }
      res.currentPageRecords.forEach((ele) => {
        ele.createTime = ele.createTime.split('T').join(' ')
      })
      this.tableData = res
    },
    // 删除数据
    async delArea (id) {
      this.$confirm('是否要删除该区域, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await delPolicy(id)
          this.$message.success('合作商删除成功')
          this.getAreaList()
        } catch (err) {
          this.$message.error(err.response.data)
        }
      })
    },
    // 查看详情
    async check (row) {
      console.log(row)
      this.$refs.CheckDialog.visible = true
      const res = await checkPolicy({ ...this.params, policyId: row.policyId })
      console.log(res)
      this.areaDetails = res
      this.areaDetails.policyName = row.policyName
    },
    // 新增或修改
    changeArea (val, row) {
      if (val === 'add') {
        this.title = '新增策略'
      } else {
        this.title = '修改策略'
        this.form = { discount: row.discount, policyName: row.policyName, policyId: row.policyId }
      }
      this.$refs.AddOrEdit.visible = true
    },
    // 新增区域
    async addArea () {
      try {
        if (this.title === '新增策略') {
          await this.$refs.form.validate()
          await addPolicy(this.form)
          this.$message.success('新增成功')
          this.$refs.AddOrEdit.visible = false
          this.getAreaList()
        } else {
          await this.$refs.form.validate()
          await editPolicy(this.form)
          this.$message.success('修改成功')
          this.$refs.AddOrEdit.visible = false
          this.getAreaList()
        }
      } catch (err) {
        this.$message.error(err.response.data)
      }
    },
    // 百分比
    addRatio () {
      this.form.ratio ? this.form.ratio++ : (this.form.ratio = 1)
    },
    subRatio () {
      this.form.ratio <= 0 ? (this.form.ratio = 0) : this.form.ratio--
    }
  }
}
</script>

<style lang="less" scoped>
.header-search {
  .search-from {
    text-align-last: left;
    height: 100%;
    .area-search {
      width: 20%;
      margin: 0;
      /deep/ .el-form-item__label {
        line-height: 64px !important;
      }
      /deep/ .el-form-item__content {
        line-height: 64px !important;
        .el-input__inner {
          height: 36px;
        }
      }
    }

    .search-btn {
      height: 100%;
      margin: 0;
      padding: 14px;
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 36px;
        background-color: #5f84ff;
        color: #fff;
        padding: 0;
      }
    }
  }
}
/deep/ .el-input-group__append {
  padding: 0;
  width: 40px;
  .add-sub {
    display: flex;
    flex-direction: column;
    padding: 0;
    .el-icon-arrow-up {
      cursor: pointer;
      width: 100%;
      border-bottom: 1px solid #d8dde3;
      text-align: center;
    }
    .el-icon-arrow-down {
      cursor: pointer;
      text-align: center;
    }
  }
}
</style>

<style lang="scss" scoped></style>
